<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:py="http://genshi.edgewall.org/"
	xmlns:xi="http://www.w3.org/2001/XInclude">

<xi:include href="master.html" />

<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"
	py:replace="''" />
<title>${title}</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="/js/themes/steel/grid.css" />
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/jquery.delegate.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAeFJwBWwjghHxyhevob4QUBQGFexytti7C5W2oy1Wpm95vnnC2BQ8rqNmQHzVEApeY6ScJV0ZZH_Mzw"></script>
<script type="text/javascript">
	// <![CDATA[
	google.load("maps", "2");
	var map = null; 
    function initialize() {
      if (GBrowserIsCompatible() && map == null) {
        map = new google.maps.Map2($("#map")[0]);
        map.setCenter(new GLatLng(37.4419, -122.1419), 2);
      }
    }
	// ]]>
    </script>

</head>
<body>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){ 
  $('#tabs').tabs();
  $("#date").datepicker({dateFormat: 'dd/mm/yy',showOn: 'button', buttonImage: '/images/calendar.gif', buttonImageOnly: true})
  $("#ui-datepicker-div").css("z-index",5000);
  $("#diveForm").validate();
  $('#tabs').bind('tabsshow', function(event, ui) {

	    // Objects available in the function context:
	    ui.tab     // anchor element of the selected (clicked) tab
	    ui.panel   // element, that contains the selected/clicked tab contents
	    ui.index   // zero-based index of the selected (clicked) tab
		if (ui.panel.id == "divesite-tab") initialize()		
	});
  

}); 
//]]>
</script>
 <form action="/logbook/save" id="diveForm" method="post">
 <input type="hidden" name="id" value="${dive.id if dive != None else None}"/>
 <button type="submit"  class=".ui-state-hover ui-corner-all ">Save</button>
<div id="tabs">
<ul>
	<li><a href="#main-tab">Basic Details</a></li>
	<li><a href="#buddy-tab">Buddy</a></li>
	<li><a href="#divesite-tab">Dive Site</a></li>
	<li><a href="#equipment-tab">Equipment</a></li>
</ul>
<div id="main-tab" style="padding: 0;">
<div style="position: relative; width: 100%"><br/><img
	src="/images/profile.png" alt="" />
<div
	style="position: absolute; left: 540px; top: 70px; width: 350px; height: 241px; padding: 10px; background-image: url('/images/back.png'); background-repeat: no-repeat">
Date :<input id="date" name="date" value="${dive.date.day if dive != None else None}${'/'+str(dive.date.month) if dive != None else None}${'/'+str(dive.date.year) if dive != None else None}" style="width: 80px" class="required"></input> <input
	id="add_date_h" name="dateHour" value="${dive.date.hour if dive != None else None}" type="text" maxlength="2" class="" style="width: 20px" />:
<input id="add_date_m" name="dateMinute" value="${dive.date.minute if dive != None else None}" maxlength="2" style="width: 20px" />: <input
	id="add_date_s" name="dateSecond" value="${dive.date.second if dive != None else None}" maxlength="2" style="width: 20px" /><br />
Duration :<input id="duration" name="duration" value="${dive.duration if dive != None else None}" size="3" /><br />
Max Depth :<input id="greatestdepth" name="greatestdepth"  size="3" value="${dive.greatestdepth if dive != None else None}"/><br />
Temperature :<input id="lowesttemperature" name="lowesttemperature" size="3" value="${dive.lowesttemperature if dive != None else None}" /><br />
Notes :<textarea id="notes" name="notes"  >${dive.notes if dive != None else None}</textarea><br />

</div>

</div>

</div>
<div id="divesite-tab" style="">
<div id="map" style="width: 880px; height: 600px;"></div>
</div>
<div id="equipment-tab">will be done in version 0.6</div>
<div id="buddy-tab">


</div>

</div>
</form>
</body>
</html>
